<template>
    <div id=push>
        <div>
            <!-- 查询 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <!-- 添加按钮 -->
                <el-button type="danger" @click="dialogFormVisible = true">添加</el-button>

                <!-- 查询 -->
                <el-form-item label="">
                    <el-input v-model="formInline.orderNumber" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 订单列表显示 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="createTime"
                label="订单时间"
                width="125">
            </el-table-column>
            <el-table-column
                prop="orderNumber"
                label="订单编号"
                width="125">
            </el-table-column>
            <el-table-column
                prop="picUrl"
                label="商品图片"
                width="125">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                        <img :src="scope.row.picUrl" alt="" style="width: 150px;height: 150px">
                        <img slot="reference" :src="scope.row.picUrl" style="width: 30px;height: 30px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="proName"
                label="商品名称"
                width="125">
            </el-table-column>
            <el-table-column
                prop="price"
                label="单价"
                width="125">
            </el-table-column>
            <el-table-column
                prop="proNum"
                label="数量"
                width="125">
            </el-table-column>
            <el-table-column
                prop="newPrice"
                label="实付款"
                width="125">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="买家"
                width="125">
            </el-table-column>
            <el-table-column
                prop="orderStatus"
                label="状态"
                width="125" :formatter="state">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.orderId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currIndex"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
            </el-pagination>
        </div>
        
        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="订单编号" :label-width="formLabelWidth" prop="orderNumber">
                    <el-input v-model="form.orderNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单地址" :label-width="formLabelWidth" prop="orderAdress">
                    <el-input v-model="form.orderAdress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮费" :label-width="formLabelWidth" prop="postage">
                    <el-input v-model="form.postage" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="运费险" :label-width="formLabelWidth" prop="insurance">
                    <el-input v-model="form.insurance" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth" prop="remarks">
                    <el-input v-model="form.remarks" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="orderStatus">
                    <el-radio-group v-model="form.orderStatus">
                        <el-radio label="1" value="1">已付款</el-radio>
                        <el-radio label="2" value="2">待发货</el-radio>
                        <el-radio label="3" value="3">待收货</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户ID" :label-width="formLabelWidth" prop="userId">
                    <el-input v-model="form.userId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="添加时间" :label-width="formLabelWidth" prop="createTime">
                    <el-input type="date" v-model="form.createTime" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormAdd('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="dialogFormVisibles">
            <el-form ref="forms" :model="forms" :rules="rules">
                <el-form-item label="订单时间" :label-width="formLabelWidth" prop="createTime">
                    <el-input v-model="forms.createTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单编号" :label-width="formLabelWidth" prop="orderNumber">
                    <el-input v-model="forms.orderNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth" prop="picUrl">
                    <!-- <el-input v-model="forms.picUrl" autocomplete="off"></el-input> -->
                    <img :src="forms.picUrl" width="88px" height="88px" />
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="proName">
                    <el-input v-model="forms.proName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="forms.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="proNum">
                    <el-input v-model="forms.proNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实付款" :label-width="formLabelWidth" prop="newPrice">
                    <el-input v-model="forms.newPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="买家" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="forms.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="orderStatus">
                    <el-radio-group v-model="forms.orderStatus">
                        <el-radio :label="1">未付款</el-radio>
                        <el-radio :label="2">已付款</el-radio>
                        <el-radio :label="3">未发货</el-radio>
                        <el-radio :label="4">已发货</el-radio>
                        <el-radio :label="5">待评价</el-radio>
                        <el-radio :label="6">完成</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormUpts('forms')">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
  </template>

 <script>
    export default {
      data() {
        return {
            tableData: [], //定义数据属性
            count: 0,
            currIndex: 1,
            pageSize: 3,
            form:{
                orderNumber:'',
                orderAdress:'',
                postage: '',
                insurance: '',
                remarks: '',
                orderStatus: '',
                userId: '',
                createTime: ''
            },
            forms:{
                orderId:'',
                createTime: '',
                orderNumber:'',
                picUrl:'',
                proName: '',
                price: '',
                proNum: '',
                newPrice: '',
                userName: '',
                orderStatus: ''
            },
            dialogFormVisible:false,
            dialogFormVisibles:false,
            formLabelWidth:'120px',
            formInline: {
                orderNumber: ''
            },
            rules:{
                createTime: [{
                    required: true,
                    message: '请输入创建时间',
                    trigger: 'blur'
                }],
                orderNumber:[{
                    required: true,
                    message: '请输入订单编号',
                    trigger: 'blur'
                }],
                picUrl: [{
                    required: true,
                    message: '请输入商品图片',
                    trigger: 'blur'
                }],
                proName: [{
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }],
                price: [{
                    required: true,
                    message: '请输入单价',
                    trigger: 'blur'
                }],
                proNum: [{
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur'
                }],
                newPrice: [{
                    required: true,
                    message: '请输入实付款',
                    trigger: 'blur'
                }],
                userName: [{
                    required: true,
                    message: '请输入买家',
                    trigger: 'blur'
                }]
            }
            
        }
      },
        // 组件被创建时间处理
        created:function(){
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Order/Index",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
        },
        //挂载完成执行
        mounted(){
            //判断状态
            if(tableData.orderStatus){
                this.orderStatus="未付款";
                this.tableData.orderStatus=1;
            }
            else if(tableData.orderStatus){
                this.orderStatus="已付款";
                this.tableData.orderStatus=2;
            }
            else if(tableData.orderStatus){
                this.orderStatus="待发货";
                this.tableData.orderStatus=3;
            }
            else if(tableData.orderStatus){
                this.orderStatus="已发货";
                this.tableData.orderStatus=4;
            }
            else if(tableData.orderStatus){
                this.orderStatus="待评价";
                this.tableData.orderStatus=5;
            }
            else if(tableData.orderStatus){
                this.orderStatus="完成";
                this.tableData.orderStatus=6;
            }
        },
        methods: {
            state(row,column,cellValue,index){
                if(row.orderStatus == 1){
                    return '未付款'
                }else if(row.orderStatus == 2){
                    return '已付款'
                }else if(row.orderStatus == 3){
                    return '未发货'
                }else if(row.orderStatus == 4){
                    return '已发货'
                }else if(row.orderStatus == 5){
                    return '待评价'
                }else if(row.orderStatus == 6){
                    return '完成'
                }
            },
            show(){
                // 用axios发送请求给api
                this.axios
                    .get("https://localhost:44324/api/Order/Index",
                        {params:{pageIndex:this.currIndex, //传递的参数
                                pageSize:this.pageSize}})
                    .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //分页条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Order/Index",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:val}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //分页页数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Order/Index",
                    {params:{pageIndex:val, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //查询
            onSubmit(){
                //调用api接口
                this.axios
                .get("https://localhost:44324/api/Order/Index",
                    {params:{number:this.formInline.orderNumber,
                            pageIndex:this.currIndex, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.total = res.data.count});
            },
            //添加
            dialogFormAdd(form){
                console.log(this.form);
                this.$refs[form].validate((valid) => {
                    if(valid){
                        this.axios({
                        url: 'https://localhost:44324/api/Order/AddOrder',
                        method: 'post',
                        data: this.form
                        }).then((res) => {
                            if (res.data.code > 0) {
                                console.log();
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.show(); //刷新
                            } else {
                                this.$message({
                                type: 'info',
                                message: '已取消添加'
                                })
                            }
                        })
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
                
            },
            //删除
            handleDelete(a) {
                if(!confirm("确认删除吗？")){
                    return;
                }
                this.axios
                    .delete('https://localhost:44324/api/Order/DelOrder', 
                        {params:{id:a}})
                    .then((res) => {
                        if (res.data.code > 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.show(); //刷新
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消删除'
                            })
                        }
                    })
            },
            //反填
            handleEdit(f){
                this.dialogFormVisibles = true;
                this.forms=f;
                var id=f.orderId;
                console.log(id);
            },
            //修改
            dialogFormUpts(forms){
                console.log(this.forms);
                this.$refs[forms].validate((valid) => {
                    if(valid){
                        this.axios({
                        url: 'https://localhost:44324/api/Order/UptOrder',
                        method: 'post',
                        data: this.forms,
                        }).then((res) => {
                            if (res.data.code > 0) {
                                console.log();
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                this.show(); //刷新
                            } else {
                                this.$message({
                                type: 'info',
                                message: '已取消修改'
                                })
                            }
                        })
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
                
            },
            
        }
    }
  </script>
